// 默认主题变量
@import "../variables/default";
// ElementUI 样式
@import "~element-ui/packages/theme-chalk/src/index";
// 框架组件样式
@import "../widgets/index";
// 主题
@import "../variables/green";

@mixin set-border-color() {
  border-color: $--color-border-color;
}

@mixin set-font-size($number:12px) {
  font-size: $number;
}

@mixin set-el-pager() {
  .el-pagination {
    &__total, &__jump {
      color: $--color-table-text;
    }
    &.is-background .btn-prev, &.is-background .btn-next, &.is-background .el-pager li {
      background: transparent;
      color: $--color-table-text;
    }
    .btn-prev, .btn-next {
      border: 1px solid $--color-border-color;
    }
  }
}

body {
  background: $--color-body-background;
}

.xdh-curd {
  padding: 10px;
}

.xdh-panel {
  border: 0;
  .xdh-layout__main {
    margin-top: 10px;
  }
  .xdh-title {
    &__wrapper {
      background: $--color-sidebar-bg;
    }
    &__content {
      color: $--color-table-th;
      font-size: 16px;
    }
  }

  .xdh-layout__main {
    padding: 0;
  }
}

.el-table {
  font-size: 12px;
  background: transparent;
  color: $--color-table-text;

  &__empty-text {
    font-size: 16px;
    color: $--color-table-text;
  }

  &--border {
    @include set-border-color();

    th {
      @include set-border-color();

      &.is-leaf {
        @include set-border-color();
      }

    }

    td {
      @include set-border-color();
    }
  }

  &__fixed::before, &__fixed-right::before, &::before, &--group::after, &--border::after {
    background-color: $--color-border-color
  }

  thead {
    color: $--color-table-text;
  }

  th {
    color: $--color-table-th;
    padding: 5px 0;
    background: $--color-form-inner;
    font-weight: normal;
    text-align: center;
  }

  tr:nth-child(2n+1) {
    background: transparent;
  }

  tr {
    background: $--color-form-tr-bg;
  }

  td {
    padding: 5px 0;
    text-align: center;
  }

  tr.hover-row {
    &, &.el-table__row--striped {
      &, &.current-row {
        > td {
          background-color: transparent;
        }
      }
    }
  }

  .el-button {
    background: transparent;
    border: 0;
    color: $--color-node;
    &--mini {
      padding: 7px 5px;
      font-size: 18px;
    }
    & + .el-button {
      margin-left: 0;
    }
  }

}

@include set-el-pager();

.xdh-list-panel__pager {
  background: transparent;
  @include set-el-pager();
}

.el-table--striped .el-table__body tr.el-table__row td {
  background: transparent;
}

.el-tooltip__popper {
  padding: 5px 10px;
  &.is-dark {
    background: $--color-node;
  }
  &[x-placement^=top] .popper__arrow {
    border-top-color: $--color-node;
    &::after {
      border-top-color: $--color-node;
    }
  }
}

/*表单类*/
.el-checkbox {
  color: $--color-table-text;
  &__inner {
    width: 18px;
    height: 18px;
    background: $--color-form-bg;
    border-color: $--color-border-color;
    &::after {
      width: 6px;
      height: 11px;
    }
  }
  &__input {
    &.is-disabled {
      .el-checkbox__inner {
        background: $--color-form-bg;
        border-color: $--color-border-color;
      }
    }
    &.is-checked + .el-checkbox__label {
      color: $--color-table-text;
    }
  }
  &__label {
    @include set-font-size();
  }
}

.el-radio {
  color: $--color-table-text;
  &__inner {
    width: 18px;
    height: 18px;
    background: transparent;
    border-color: $--color-node;
    &::after {
      background: $--color-node;
      width: 8px;
      height: 8px;
    }
  }

  &__input.is-checked {
    + .el-radio__label {
      color: $--color-table-text;
    }
    .el-radio__inner {
      background: transparent;
    }
  }

  &__label {
    @include set-font-size();
  }
}

.el-input {
  &__inner {
    height: 32px;
    line-height: 32px;
    border-radius: 0;
    color: $--color-table-text;
    font-size: 12px;
    background: $--color-form-bg;
    @include set-border-color();
  }
}

.el-textarea {
  &__inner {
    font-family: Arial;
    color: $--color-table-text;
    background: $--color-form-bg;
    @include set-border-color();
    @include set-font-size();
  }
}

.el-date-editor {
  .el-range-input {
    @include set-font-size();
    background: transparent;
    color: $--color-table-text;
  }
  .el-range__icon, .el-range-separator, .el-range__close-icon {
    line-height: 24px;
    color: $--color-node;
  }
}

.el-select-dropdown {
  background: $--color-form-bg;
  @include set-border-color();
  &__item {
    font-size: 12px;
    color: $--color-table-text;
    &.hover, &:hover {
      background: $--color-node;
    }
    &.selected {
      color: $--color-table-text;
    }
  }
  &.el-popper[x-placement^="bottom"] .popper__arrow {
    border-bottom-color: $--color-border-color;
    &::after {
      border-bottom-color: $--color-border-color;
    }
  }
}

.el-popover {
  background: $--color-form-bg;
  @include set-border-color();

  &__item {
    color: $--color-table-text;
    &.hover, &:hover {
      background: $--color-node;
    }
  }
  &.el-popper[x-placement^="bottom"] .popper__arrow {
    border-bottom-color: $--color-border-color;
    &::after {
      border-bottom-color: $--color-border-color;
    }
  }
}

.el-tree {
  background: $--color-form-bg;
  color: $--color-table-text;
  .el-tree-node {
    &:focus {
      > .el-tree-node__content {
        background: $--color-node;
      }
    }
    &__content {
      &.hover, &:hover {
        background: $--color-node;
      }
    }
  }
  .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background: $--color-node;
  }
}

.el-radio-group {
  .el-radio-button__inner {
    padding: 8px 20px;
    font-size: 12px;
    background: $--color-form-bg;
    color: $--color-table-text;
  }
}

.el-switch {
  &__core {
    background: $--color-table-text;
  }
  &__label {
    color: $--color-form-bg;
  }
  &.is-checked {
    &__core {
      background: $--color-node;
    }
  }
}

.el-upload-list {
  &__item-name {
    color: $--color-table-text;
  }
}

.el-form {
  .el-form-item {
    margin-bottom: 15px;
    &__label {
      color: $--color-table-text;
      @include set-font-size()
    }
    &__content {
      color: $--color-table-text;
      .el-table {
        line-height: 21px;
      }
    }
  }
  .xdh-title {
    min-height: 30px;
    margin-bottom: 10px;
    background: $--color-xdh-title;
    &--primary.is-simple .xdh-title__content {
      border-left: 0;
    }
    &__content {
      font-size: 14px;
      padding-left: 20px;
      color: $--color-form-bg;
    }
  }
}

.form__inner_table {
  margin: 10px 0;
}

/*弹窗*/
.xdh-window {
  background: $--color-xdh-window;
  border-radius: 0;
  border: 1px solid $--color-border-color;
  &__header {
    border-radius: 0;
    background-position: right center;
    background-image: url("");
  }
  &__title {
    color: $--color-table-th;
    font-size: 14px;
  }
  &__tool {
    color: $--color-header-tool;
  }
  &__footer {
    border-top: 2px solid $--color-footer-border;
    .el-button {
      width: 120px;
      padding: 11px 20px;
      font-size: 12px;
      color: $--color-table-th;
      border: 0;
      border-radius: 0;
      &--default {
        background: $--color-xdh-window-btn--default;
      }
      &--primary {
        background: $--color-xdh-window-btn--primary;
      }
    }
  }
}

/*xdh-tabs*/
.el-tabs {
  &--border-card {
    background: transparent;
    border: 0;
  }
}

.xdh-layout--split {
  margin: 10px;
}

/*菜单*/
.el-menu {
  background: transparent;
  &--horizontal {
    background: $--color-el-dropdown-menu;
    border: 1px solid $--color-border-color;
    .el-menu .el-menu-item {
      background: transparent;
      color: $--color-table-text;
      &:hover {
        background: $--color-el-dropdown-menu-focus;
        color: $--color-sidebar-text;
      }
      &.is-active {
        background: $--color-el-dropdown-menu-focus;
        border-bottom: 1px solid $--color-border-color;
        color: $--color-sidebar-text;
      }
    }
    .el-submenu {
      .el-submenu__title {
        i {
          color: $--color-table-text;
        }
        &:hover {
          background: transparent;
          color: $--color-table-text;
        }

      }
      &.is-active .el-submenu__title {
        color: $--color-table-text;
      }
    }
  }
}

.el-dropdown-menu {
  background: $--color-el-dropdown-menu;
  border: 1px solid $--color-border-color;
  &__item {
    background: $--color-el-dropdown-menu;
    color: $--color-table-text;
    &:not(.is-disabled):hover, &:focus {
      background: $--color-el-dropdown-menu-focus;
      color: $--color-sidebar-text;
      a {
        color: $--color-sidebar-text;
      }
    }
    a {
      color: $--color-table-text;
    }
  }
}

.top-header {
  background-image: url("");
  &__title {
    color: $--color-primary-light-9;
    text-shadow: 2px 2px 2px $--color-header-ttitle;
  }
  &__tools {
    .tool-item {
      border: 2px solid $--color-header-tool-item;
    }
    .tool-item-info {
      color: $--color-header-tool;
    }
    .tool-item-icon {
      i {
        color: $--color-header-tool;
      }
    }
  }
}

.sidebar {
  background: $--color-sidebar-bg;
  .sidebar-title {
    color: $--color-sidebar-text;
    background: $--color-sidebar-title;
  }
  .el-menu, .el-menu--horizontal {
    background: $--color-sidebar-bg;
    .el-menu-item {
      color: $--color-sidebar-text;
      &.is-active {
        background: $--color-header-tool;
        color: $--color-sidebar-text;
      }
      &:not(.is-disabled):hover {
        background: $--color-header-tool;
        color: $--color-sidebar-text;
      }
      &:not(.is-disabled):focus {
        background: $--color-header-tool;
        color: $--color-sidebar-text;
      }
    }
    .el-submenu, .el-submenu--horizontal {
      color: $--color-table-text;
      &.is-active {
        background: $--color-el-dropdown-menu-focus;
        color: $--color-sidebar-text;
      }
      &:not(.is-disabled):hover {
        background: $--color-el-dropdown-menu-focus;
        color: $--color-sidebar-text;
      }
      &:not(.is-disabled):focus {
        background: $--color-sidebar-bg;
        color: $--color-sidebar-text;
      }
      .el-submenu__title {
        color: $--color-sidebar-text;
        i {
          color: $--color-sidebar-text;
        }
      }
    }
  }
}

/*流程图*/
.process-circle {
  .process-name {
    color: $--color-table-text;
  }
}

.process-line {
  &_to {
    background-color: #ecf6ff;
  }
}

/*欢迎页*/
.welcome-text {
  color: $--color-table-text
}
